<template>
  <div class="adoptAreaList">
    <search-block>
      <template slot="button">
        <el-button type="primary" @click="search(true)">查询</el-button>
        <el-button type="primary" @click="addArea">添加区域</el-button>
      </template>
      <el-form inline :model="model" label-width="100px" @submit.native.prevent>
        <el-form-item label="区域名:">
          <el-input v-model="model.name" clearable></el-input>
        </el-form-item>
      </el-form>
    </search-block>
    <y-table
        ref="table"
        border
        pagination
        :getDataWay="getDataWay"
        :columns="columns"
    >
      <el-table-column slot="enableFlag" label="启用" align="center" header-align="center">
        <template v-slot="{row}">
          <el-popconfirm
            :title="row.enableFlag === '0' ? '是否确认启用该区域？' : '是否确认停用该区域？'"
            @confirm="() => {
              if(row.enableFlag === '0') enableArea(row)
              else disableArea(row);
            }">
            <el-switch
              disabled
              slot="reference"
              v-model="row.enableFlag"
              active-value="1"
              inactive-value="0"></el-switch>
          </el-popconfirm>
        </template>
      </el-table-column>
      <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="150">
        <template v-slot="{row}">
          <div class="table-buttons">
            <el-button type="primary" size="mini" @click="editArea(row)">编辑</el-button>
            <el-popconfirm
                title="是否确认删除该区域？"
                @confirm="delArea(row)">
              <el-button slot="reference" type="danger" size="mini">删除</el-button>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </y-table>
    <y-form
        v-model="forms.formModel"
        :visible.sync="forms.showForm"
        :title="forms.formTypeTitle[forms.formsType]"
        destroy-on-close
        width="50%"
        :form-attrs="forms.formAttrs"
        :columns="formColumns"
        @ensure="ensureModel">
    </y-form>
  </div>
</template>

<script>
export default {
  name: "adoptAreaList",
  computed:{
    getDataWay(){
      return{
        dataType: 'url',
        data: this.$api.adopt.adoptAreaList,
        param: this.model
      }
    },
    formColumns(){
      return [
        {
          label: "区域代码",
          prop: "code",
          comp:{
            compType: 'input',
            attrs:{
              disabled: this.forms.formsType === 'EDIT'
            }
          }
        },{
          label: "区域名",
          prop: "name",
          comp:{
            compType: 'input',
            attrs:{
              maxlength: 4,
              showWordLimit: true
            }
          }
        },{
          label: "区域位置",
          prop: "location",
          comp:{
            compType: 'input',
            attrs:{
              maxlength: 10,
              showWordLimit: true
            }
          }
        }/*,{
          label: "区域类型",
          prop: "type",
          comp:{
            compType: 'input',
          }
        }*/,{
          label: "点赞数",
          prop: "likeNo",
          comp:{
            compType: 'input-number',
            attrs:{
              stepStrictly: true
            }
          }
        },{
          label: "投喂数",
          prop: "feedNo",
          comp:{
            compType: 'input-number',
            attrs:{
              stepStrictly: true
            }
          }
        },{
          label: "描述",
          prop: "description",
          comp:{
            compType: 'input',
            attrs:{
              type: 'textarea',
              maxlength: 200,
              showWordLimit: true,
            }
          }
        },{
          label: "排序",
          prop: "orderNum",
          comp:{
            compType: 'input-number',
            attrs:{
              stepStrictly: true
            }
          }
        }
      ]
    }
  },
  data(){
    return{
      model:{
        name: '',
      },
      columns: [{
        label: "区域名",
        prop: "name"
      },{
        label: "区域代码",
        prop: "code",
      },{
        label: "位置",
        prop: "location"
      }/*,{
        label: "类型",
        prop: "type"
      }*/,{
        label: "点赞数",
        prop: "likeNo"
      },{
        label: "投喂数",
        prop: "feedNo"
      },{
        label: "启用",
        prop: "enableFlag",
        template: true
      }],
      forms:{
        formsType: '',
        formTypeTitle: {
          'ADD': '添加区域',
          'EDIT': '编辑区域'
        },
        formModel:{
          id: '',
          name: '',
          code: '',
          location: '',
          /*type: '',*/
          likeNo: '',
          feedNo: '',
          orderNum: '',
          description: ''
        },
        currentForm: null,
        showForm: false,
        formAttrs:{
          labelWidth: '100px',
          rules: {
            name: [{required: true, message: "请输入区域名", trigger: "blur"}],
            code: [
              {required: true, message: "请输入区域代码", trigger: "blur"},
              {
                validator: (rule, value, callback) => {
                  this.$$validateCode(
                    this.$api.adopt.validateAreaCode,
                    {
                      areaCode: value,
                      id: this.forms.formModel.id
                    }, callback);
                },
                trigger: 'blur'
              }
            ]
          }
        }
      }
    }
  },
  methods:{
    resetForm(){
      Object.keys(this.forms.formModel).map(key => {
        this.forms.formModel[key] = this.forms.currentForm ? this.forms.currentForm[key] : '';
      })
    },
    addArea(){
      this.forms.formsType = 'ADD';
      this.forms.currentForm = null;
      this.resetForm();
      this.forms.showForm = true;
    },
    search(jumpToFirst){
      this.$refs['table'].loadData(this.model, jumpToFirst);
    },
    editArea(row){
      this.forms.formsType = 'EDIT';
      this.forms.currentForm = row;
      this.resetForm();
      this.forms.showForm = true;
    },
    delArea(row){
      this.$yAxios({
        url: this.$api.adopt.removeAdoptArea,
        data:{
          ids: [row.id]
        }
      }, info => {
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.search();
        this.$bus.$emit('refreshAdoptAreaList');
      })
    },
    ensureModel(form){
      let newForm;
      if(this.forms.formsType === 'EDIT'){
        newForm = Object.assign({}, this.forms.currentForm, form);
      }else{
        newForm = Object.assign({ enableFlag: '1' }, form);
      }
      this.$yAxios({
        url: this.$api.adopt.saveAdoptArea,
        data: newForm
      }, info => {
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        this.search(this.forms.formsType === 'ADD');
        this.$bus.$emit('refreshAdoptAreaList');
      })
    },
    enableArea(row){
      this.$yAxios({
        url: this.$api.adopt.enableArea,
        data:{
          ids: [row.id]
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: `成功停用区域【${row.name}】`
        });
        this.search();
        this.$bus.$emit('refreshAdoptAreaList');
      });
    },
    disableArea(row){
      this.$yAxios({
        url: this.$api.adopt.disableArea,
        data:{
          ids: [row.id]
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: `成功启用区域【${row.name}】`
        });
        this.search();
        this.$bus.$emit('refreshAdoptAreaList');
      });
    },
  }
}
</script>

<style scoped lang="less">

</style>